<template>
  <div class="product">
    <van-nav-bar title="商品详情">
      <template #left>
        <van-icon
          name="arrow-left"
          size=".6rem"
          @click="$router.back()"
          color="grey"
        />
      </template>
      <template #right>
        <van-icon name="ellipsis" size=".6rem" color="grey" />
      </template>
    </van-nav-bar>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      height="375"
    >
      <van-swipe-item v-for="i in 4" :key="i">
        <img :src="info.img"
      /></van-swipe-item>
    </van-swipe>
    <h4 v-text="info.desc" class="desc"></h4>
    <div class="price">
      <span> ------- 价格:{{ info.price }} -------</span>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" v-auth text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" v-auth text="购物车" />
      <van-goods-action-icon icon="star" v-auth text="已收藏" color="#ff5000" />
      <van-goods-action-button
        type="warning"
        v-auth
        text="加入购物车"
        @click="addToCart"
      />
      <van-goods-action-button type="danger" v-auth text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {},
    };
  },
  created() {
    const id = this.$route.params.id;
    console.log(id);
    this.$api.fetchGoodInfo({ id }).then((res) => {
      console.log("商品详情", res);
      this.info = res.info;
    });
  },
  methods: {
    addToCart() {
      console.log("调用添加购物车接口");
      this.$api
        .fetchCartAdd({
          good_id: this.info._id,
          num: 1,
        })
        .then((res) => {
          console.log("添加购物车成功", res);
          this.$toast({
            type: "success",
            message: "加入购物车成功",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.product {
  background: #f2f2f2;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: orange;
}
.my-swipe .van-swipe-item img {
  width: 100%;
  height: 100%;
}
.desc {
  margin: 0.266667rem auto;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(0.266667rem) saturate(180%);
  width: 9rem;
  height: 2.8rem;
  border-radius: 1rem;
  overflow: hidden;
}
.price {
  // margin-left: 0.6rem;
  text-align: center;
  color: goldenrod;
}
</style>
